<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>拖影</title>
    <style>
        *{
            margin:0;
            padding: 0;
        }
        div{
            /*width: 10px;
            height: 10px;*/
            border-radius: 50%;
            /*background-color: red;*/
            position: absolute;
            left:100px;
            top:100px;
        }
    </style>
</head>
<body>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <script>
        var divs = document.getElementsByTagName('div');
        // 设置随机数
        function rand(min,max){
            return parseInt(Math.random()*(max - min + 1) + min);
        }
        for(var i=0; i<divs.length; i++){
            // 设置背景色
            divs[i].style.backgroundColor = 'rgb(' + rand(0,255) + ',' + rand(0,255) + ',' + rand(0,255) + ')' 
            // 设置大小
            divs[i].style.width = i * 4 + 'px';
            divs[i].style.height = i * 4 + 'px';
        }
        document.onmousemove = function(e){
            var e = e || window.event;
            for(var i=0; i<divs.length; i++){
                // 设置背景色
                divs[i].style.backgroundColor = 'rgb(' + rand(0,255) + ',' + rand(0,255) + ',' + rand(0,255) + ')' ;
            }
            var i = -1;
            var time = setInterval(function(){
                i++;
                if(i >= divs.length - 1){
                    clearInterval(time);
                }
                divs[i].style.left = e.clientX - divs[i].clientWidth / 2 + 'px';
                divs[i].style.top = e.clientY - divs[i].clientHeight / 2 + 'px';
            },100);
        }
    </script>
</body>
</html>